<template>
    <div class="box" @touchmove.prevent>
      <div class="nav">
        <router-link to="/mine">
          <img @click="bian()" src="../../assets/lyl/image/tuijian/BMQD-1.png" alt="">
        </router-link>
        <p>设置</p>
      </div>
      <ul>
        <li v-for="item in data">
          <router-link :to="item.to">
            <span>{{item.txt}}</span>
            <img :src="item.src" alt="">
          </router-link>
        </li>
        <li class="tan" @click="tankuang()">
           <span>清除缓存</span>
           <span>{{n}}</span>
        </li>
        <li v-for="item in data1">
          <router-link :to="item.to">
            <span>{{item.txt}}</span>
            <img :src="item.src" alt="">
          </router-link>
        </li>
        <li class="tan" @click="jiancha()">
          <span>检查更新</span>
          <img src="/static/lyl/youjian.png" alt="">
        </li>
      </ul>
      <transition name="fade">
        <span v-if="bolll">清除成功</span>
      </transition>
      <transition name="fade">
        <span v-if="bollll">检查中...</span>
      </transition>
      <span v-if="bolllll">已是最新版本</span>

      <div @click="qux()" v-if="blo" class="zheceng">
        <div @click.stop>
          <p>确认清除缓存？</p>
          <div>
            <span @click="qux()">取消</span>
            <span @click="qccg()">确认</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "Shezhi",
      data(){
        return {
          blo:false,
          bolll:false,
          bollll:false,
          bolllll:false,
          n:'10kb',
          data:[
            {to:'/zhanghu',txt:'账户管理',src:'/static/lyl/youjian.png'},
            {to:'/xiupas',txt:'修改登录密码',src:'/static/lyl/youjian.png'},
          ],
          data1:[
            {to:'/',txt:'阿拉灯平台用户协议',src:'/static/lyl/youjian.png'},
            {to:'/',txt:'个人委托协议',src:'/static/lyl/youjian.png'}
          ]
        }
      },
      updated(){
        this.bolll = false;
        this.bollll = false;
      },
      methods:{
        tankuang(){
          this.blo = true;
        },
        qux(){
          this.blo = false;
        },
        qccg(){
          this.n = '0kb';
          this.blo = false;
          this.bolll = true;
          this.bolllll = false;
        },
        jiancha(){
          this.bolllll = false;
          this.bollll = true;
          setTimeout(function () {
            this.bolllll = true;
          }.bind(this),2000);
        },
        bian(){
          this.bolllll = false;
        }
      }
    }
</script>

<style scoped>
  .box{
    background: #f2f2f2;
  }
  .nav{
    opacity: 0.8;
    width: 100%;
    background: #e53e42;
    padding: 3.5rem 0;
    display: flex;
    justify-content: center;
  }
  .nav a{
    position: absolute;
    left: 2rem;
    color: #fff;
    font-size: 34px;
  }
  .nav p{
    font-size: 34px;
    color:#fff;
  }
  ul li{
    padding: 3rem 2rem;
    background: #fff;
    border-bottom: 1px solid #ccc;
  }
  ul li a{
    display: flex;
    justify-content: space-between;
  }
  ul .tan{
    display: flex;
    justify-content: space-between;
  }
  ul li span{
    font-size: 2.8rem;
    line-height: 3.6rem;
  }
  ul li img{
    width: 1.3rem;
    height: 2.2rem;
    align-self: center;
  }
  .zheceng{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
  }
  .zheceng>div{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 41rem;
    height: 26rem;
    background: #fff;
  }
  .zheceng>div>p{
    height: 16rem;
    text-align: center;
    line-height: 16rem;
    font-size: 3rem;
    border-bottom: 1px solid #ccc;
  }
  .zheceng>div>div{
    display: flex;
  }
  .zheceng>div>div>span{
    width: 50%;
    height: 10rem;
    line-height: 10rem;
    text-align: center;
    font-size: 2.8rem;
  }
  .zheceng>div>div>span:nth-child(1){
    border-right: 1px solid #ccc;
  }
  .box>span{
    display: block;
    width: 19.6rem;
    height: 6rem;
    line-height: 6rem;
    text-align: center;
    background: #797979;
    font-size: 3rem;
    color: #fff;
    margin: 4.8rem auto;
  }

  .fade-enter,.fade-leave-to{
    opacity: 0;
  }
  .fade-enter-active,.fade-leave-active{
    transition: all 2s ease-in-out;
  }
  .fade-enter-to,.fade-leave{
    opacity: 1;
  }
</style>
